<template>
  <form class="order-form" @submit.prevent="submitOrder">
    <div class="form-item">
      <!-- <label>价格</label>
      <input type="number" v-model="newPrice" min="0" step="0.01" />
      <span>USDT</span> -->
      <!-- <a-input-number v-model="newPrice" prefix="价格" class="limit-order-input" suffix="USDT" min="0" step="0.1"
        @input="updateValue" /> -->
      <div class="custom-input-number">
        <span class="prefix">价格</span>
        <a-input
          type="number"
          @change="priceChange"
          v-model:value="newPrice"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix">USDT</span>
        <div class="btn-group">
          <button type="button" @click="incrementPrice">
            <!-- <UpOutlined /> -->
            ︿
          </button>
          <button type="button" @click="decrementPrice">
            <!-- <DownOutlined /> -->
            ﹀
          </button>
        </div>
      </div>
    </div>
    <div class="form-item">
      <!-- <a-input v-model="amount" prefix="数量" class="limit-order-input" suffix="BTC" /> -->
      <div class="custom-input-number">
        <span class="prefix">数量</span>
        <a-input
          type="number"
          v-model:value="amount"
          @change="amountChange"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix" style="margin-right: 12px">{{
          buyType.currencyType
        }}</span>
      </div>
    </div>
    <a-slider id="test" class="limit-order-slider" v-model="sliderValue" />
    <div class="form-item">
      <!-- <a-input v-model="total" prefix="交易额" class="limit-order-input" suffix="USDT" /> -->
      <div class="custom-input-number">
        <span class="prefix">交易额</span>
        <a-input
          type="number"
          v-model:value="total"
          @change="turnoverChange"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix" style="margin-right: 12px">USDT</span>
      </div>
    </div>
    <div class="form-item bottom-text-limit-order">
      <label>可用</label>
      <span>0.000000 USDT</span>
    </div>
    <div class="form-item bottom-text-limit-order">
      <label>{{ props.tradeType === "buy" ? "最大可买" : "最大可卖" }}</label>
      <span>-- {{ buyType.currencyType }}</span>
    </div>

    <div class="advanced-options">
      <div class="advanced-header" @click="toggleAdvanced">
        高级选项
        <span>{{ isAdvancedOpen ? "︿" : "﹀" }}</span>
      </div>
      <div v-if="isAdvancedOpen" class="advanced-content">
        <label>
          <input
            type="checkbox"
            @change="optionsChange($event, 'post')"
            v-model="options.post"
          />
          POST
        </label>
        <label>
          <input
            type="checkbox"
            @change="optionsChange($event, 'ioc')"
            v-model="options.ioc"
          />
          IOC
        </label>
        <label>
          <input
            type="checkbox"
            @change="optionsChange($event, 'iceberg')"
            v-model="options.iceberg"
          />
          冰山委托
        </label>
      </div>
    </div>
    <div class="form-item" v-if="isCheckboxIceberg">
      <div class="custom-input-number">
        <span class="prefix">显示数量</span>
        <a-input
          type="number"
          v-model:value="showNumber"
          @change="showNumberChange"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix" style="margin-right: 12px">{{
          buyType.currencyType
        }}</span>
      </div>
    </div>

    <button
      :class="props.tradeType === 'buy' ? 'submit-btn' : 'submit-btn-green'"
      type="submit"
    >
      {{
        props.tradeType === "buy"
          ? `买入 ${buyType.currencyType}`
          : `卖出 ${buyType.currencyType}`
      }}
    </button>
  </form>
</template>

<script setup>
// import { UpOutlined, DownOutlined } from '@ant-design/icons-vue';
import { buyType } from "@/data/mockData.js";
import { ref, onMounted, nextTick } from "vue";
const props = defineProps({
  tradeType: String,
});
const newPrice = ref(0);
const sliderValue = ref([]);
const amount = ref("");
const isAdvancedOpen = ref(false); // 控制高级选项的展开/折叠
const total = ref("");
const options = ref({
  post: false,
  ioc: false,
  iceberg: false,
});
const showNumber = ref("");
const isCheckboxIceberg = ref(false); // 控制冰山委托的显示数量输入框的显示/隐藏

// const total = computed(() => {
//   const p = parseFloat(newPrice.value);
//   const a = parseFloat(amount.value);
//   if (isNaN(p) || isNaN(a)) return "";
//   return (p * a).toFixed(2);
// });

onMounted(async () => {
  await nextTick();
  init();
});

// 初始化
const init = () => {
  const interval = setInterval(() => {
    const originalPrice = document.querySelector(
      "#trade_spot_limit_price_input"
    ).value;
    if (originalPrice) {
      console.log(originalPrice, "wwwwwwww");
      newPrice.value = originalPrice;
      console.log(newPrice.value, "newPrice.value");
      console.log(newPrice, "newPrice.value");
      clearInterval(interval);
    }
  }, 100);
};
const priceChange = (e, newPrice) => {
  // console.log(e);
  console.log(e, newPrice, "priceChange8888888888888888888");

  // console.log(e.target.value, "input改变的值");
  const priceInput = document.querySelector("#trade_spot_limit_price_input");
  console.log(priceInput);

  if (priceInput) {
    if (newPrice) {
      priceInput.value = newPrice;
    } else {
      priceInput.value = e.target.value;
    }
    // priceInput.value = e.target.value;
    priceInput.dispatchEvent(new Event("input", { bubbles: true }));
  } else {
    console.log("没有找到#trade_spot_limit_price_input的元素");
  }
};

const incrementPrice = () => {
  if (!newPrice.value) return;
  newPrice.value = (parseFloat(newPrice.value) + 0.1).toFixed(1);
  console.log(newPrice.value, "incrementPrice");
  priceChange("", newPrice.value);
};

const decrementPrice = () => {
  if (!newPrice.value) return;
  newPrice.value = Math.max(0, (parseFloat(newPrice.value) - 0.1).toFixed(1));
  console.log(newPrice.value, "decrementPrice");
  priceChange("", newPrice.value);
};

const amountChange = (e) => {
  const amountInput = document.querySelector("#trade_spot_limit_number_input");
  console.log(amountInput, "amountInput");
  if (amountInput) {
    amountInput.value = e.target.value;
    amountInput.dispatchEvent(new Event("input", { bubbles: true }));
    assignmentNewTurnover();
  } else {
    console.log("没有找到#trade_spot_limit_number_input的元素");
  }
};

const assignmentNewTurnover = () => {
  const originalTurnover = document.querySelector(
    "#trade_spot_limit_amount_input"
  ).value;
  console.log(originalTurnover, "wwwwwwww");
  total.value = originalTurnover;
  console.log(total.value, "total.value");
  console.log(total, "total.value");
};

const turnoverChange = (e) => {
  const turnoverInput = document.querySelector(
    "#trade_spot_limit_amount_input"
  );
  console.log(turnoverInput, "turnoverInput");
  if (turnoverInput) {
    turnoverInput.value = e.target.value;
    turnoverInput.dispatchEvent(new Event("input", { bubbles: true }));
    assignmentNewAmount();
  } else {
    console.log("没有找到#trade_spot_limit_amount_input的元素");
  }
};

const assignmentNewAmount = () => {
  const originalAmount = document.querySelector(
    "#trade_spot_limit_number_input"
  ).value;
  console.log(originalAmount, "wwwwwwww");
  amount.value = originalAmount;
  console.log(amount.value, "amount.value");
  console.log(amount, "amount.value");
};

// const originalCheckboxId = {
//   post: ".mantine-14u1gnw",
//   ioc: "#mantine-r4u",
//   iceberg: "#mantine-r51",
// };
const optionsChange = (e, type) => {
  console.log(e.target.checked, "optionsChange");
  const originalCheckbox = document.querySelectorAll(".mantine-14u1gnw");
  console.log(originalCheckbox, "originalCheckbox");
  if (originalCheckbox) {
    if (type === "post") {
      options.value.post = e.target.checked;
      originalCheckbox[0].click();
      options.value.ioc = false;
    } else if (type === "ioc") {
      options.value.ioc = e.target.checked;
      originalCheckbox[1].click();
      options.value.post = false;
    } else if (type === "iceberg") {
      options.value.iceberg = e.target.checked;
      isCheckboxIceberg.value = e.target.checked;
      originalCheckbox[2].click();
    }
  } else {
    console.log("没有找到原checkbox");
  }
};

const showNumberChange = (e) => {
  const showNumberInput = document.querySelector(".mantine-ysl0gg");
  console.log(showNumberInput, "showNumberInput");
  if (showNumberInput) {
    showNumberInput.value = e.target.value;
    showNumberInput.dispatchEvent(new Event("input", { bubbles: true }));
  } else {
    console.log("没有找到.mantine-ysl0gg的元素");
  }
};

// watch(newPrice, (newValue) => {
//   console.log(newValue, "newPrice.value123213");
//   console.log(newPrice, "newPrice.value123213");
//   const priceInput = document.querySelector("#trade_spot_limit_price_input");
//   console.log(priceInput);

//   if (priceInput) {
//     priceInput.value = newValue;
//     priceInput.dispatchEvent(new Event("input", { bubbles: true }));
//   }
// });
const submitOrder = () => {
  // alert(
  //   `${props.tradeType === "buy" ? "买入" : "卖出"}限价单：${
  //     amount.value
  //   } BTC，价格：${newPrice.value} USDT`
  // );
};

const toggleAdvanced = () => {
  isAdvancedOpen.value = !isAdvancedOpen.value;
  const originalSelect = document.querySelector(".mantine-17wb7nx");
  console.log(originalSelect);
  if (originalSelect) {
    originalSelect.click();
  }
};
</script>

<style scoped>
.order-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-options {
  /* margin-top: 16px; */
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.advanced-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.advanced-header span {
  margin-left: 5px;
}

.advanced-content {
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.advanced-content label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
}

.custom-input-number,
.custom-input {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 0 0 8px;
  width: 100%;
  height: 40px;
  background: #fff;
}

.custom-input-number .prefix,
.custom-input .prefix {
  color: #666;
  margin-right: 8px;
}

.custom-input-number .input,
.custom-input .input {
  width: 100%;
  border: none;
  outline: none;
  flex: 1;
  text-align: right;
  font-size: 16px;
  background: transparent;
}

.custom-input-number .suffix,
.custom-input .suffix {
  margin-left: 8px;
  color: #666;
}

.custom-input-number .btn-group {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.custom-input-number .btn-group button {
  border: none;
  border-left: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  width: 24px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.custom-input-number .btn-group button:first-child {
  border-bottom: 1px solid #eee;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.limit-order-input {
  width: 100%;
  height: 40px;
}

.limit-order-slider {
  width: 100%;
}

.form-item label {
  width: 60px;
  color: #666;
}

input[type="number"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  background: #f2495e;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn-green {
  width: 100%;
  background: #1bb273;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-text-limit-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.bottom-text-limit-order span {
  color: #333;
}

/* 隐藏 Chrome、Edge、Safari 下的 number input 加减按钮 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 隐藏 Firefox 下的 number input 加减按钮 */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
</style>
